import {
  Table,
  Tooltip,
  Form,
  Row,
  Col,
  Input,
  Button,
  Select,
  Space,
  message,
} from "antd";

import { DownOutlined, UpOutlined } from "@ant-design/icons";

import React, { Fragment, useState, useEffect, useCallback } from "react";
import request from "../../utils/request";
import { api } from "../../utils/constants";
import useStore from "../../utils/myStore";
import AreaRegion from "../../components/areaRegion";

// const layout = {
//   labelCol: { span: 6 },
//   wrapperCol: { span: 16 },
// };
// const tailLayout = {
//   wrapperCol: { offset: 6, span: 16 },
// };

const { Option } = Select;

const dateFormat = "YYYY/MM/DD";

const formItemLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 17 },
};



export default function Database() {
  const {

    userData,

    showLoading,
    hideLoading,
  } = useStore();

  const columns = [
    {
      title: "序号",
      width: 40,
      dataIndex: "index",
      key: "index",
      fixed: "left",
      align: "center",
    },

    {
      title: "企业名称",
      dataIndex: "enterpriseName",
      key: "enterpriseName",
      width: 200,
      ellipsis: {
        showTitle: false,
      },
      render: (enterpriseName) => (
        <Tooltip placement="topLeft" title={enterpriseName}>
          {enterpriseName}
        </Tooltip>
      ),
    },
    {
      title: "行政区划名称",
      dataIndex: "regionallName",
      key: "regionallName",
      width: 200,
      ellipsis: {
        showTitle: false,
      },
      render: (regionallName) => (
        <Tooltip placement="topLeft" title={regionallName}>
          {regionallName}
        </Tooltip>
      ),
    },
    {
      title: "项目名称",
      dataIndex: "projectName",
      key: "projectName",
      width: 200,
      ellipsis: {
        showTitle: false,
      },
      render: (projectName) => (
        <Tooltip placement="topLeft" title={projectName}>
          {projectName}
        </Tooltip>
      ),
    },


    {
      title: "项目类型",
      dataIndex: "sysDicProjectTypeName",
      width: 100,
    },
    {
      title: "项目状态",
      dataIndex: "stateName",
      width: 100,
      align: "center",
      ellipsis: {
        showTitle: false,
      },
      render: (text, record, index) => (
        <span
          className={[
            record.state == 0 ? "green--text" : null,
            record.state == 1 ? "red--text" : null,
          ].join(" ")}
        >
          {text}
        </span>
      ),
    },
    {
      title: "审核状态",
      dataIndex: "auditStateName",
      width: 100,
      align: "center",
      ellipsis: {
        showTitle: false,
      },
      render: (text, record, index) => (
        <span
          className={[
            record.auditState == -1 || record.auditState == 0
              ? "orange--text"
              : null,
            record.auditState == 1 ? "green--text" : null,
            record.auditState == 2 ? "red--text" : null,
          ].join(" ")}
        >
          {text}
        </span>
      ),
    },

    {
      title: "操作",
      key: "operation",
      fixed: "right",
      width: 180,
      align:'center',
      render: () => {
        return (
          <Space>
            {userData.type == 2 ? (
              <Button size="small">编辑</Button>
            ) : (
              <Fragment>
                <Button
                  size="small"
                  onClick={() => {
                    message.info("查看");
                  }}
                >
                  查看
                </Button>
                <Button size="small" type="primary">
                  审核
                </Button>
                <Button size="small">回退</Button>
                <Button size="small" type="primary" danger>
                  修改项目状态
                </Button>
              </Fragment>
            )}
          </Space>
        );
      },
    },
  ];

  const [expand, setExpand] = useState(false);
  // const [visible, setVisible] = useState(false);
  // const [search, setSearch] = useState({ current: 1, size: 15, total: 0 });
  const [current, setCurrent] = useState(1);
  const [size, setSize] = useState(15);
  const [total, setTotal] = useState(0);
  const [list, setList] = useState([]);

  // const [, updateState] = useState();
  // const forceUpdate = useCallback(() => updateState({}), []);

  const [search, setSearch] = useState({});
  const [doGetData, setDoGetData] = useState(false);

  const [options, setOptions] = useState({
    projectType: [],
    auditState: [
      { name: "临时保存", id: -1 },
      { name: "未审核", id: 0 },
      { name: "通过", id: 1 },
      { name: "未通过", id: 2 },
    ],
  });

  useEffect(() => {
    const getDropDownData = async () => {
      let res = await request.post(api.selectionDic, { code: "projectType" });

      if (res.status == 0) {
        setOptions({ ...options, projectType: res.data });
      }
    };

    getDropDownData();
  }, []);

  const getList = async () => {
    showLoading();
    let res = await request.post(api.propertyServiceProjectList, {
      current,
      size,
      ...search,
    });

    hideLoading();

    console.log(res);
    if (res.status == 0) {
      setTotal(res.data.total);
      setList(
        res.data.data.map((item, index) => {
          item.key = item.id;
          item.index = index + 1;
          return item;
        })
      );

      
      // forceUpdate();
    }
  };

  useEffect(() => {
    getList();
  }, [current, size, search, doGetData]);

  const [form] = Form.useForm();

  const onFinish = useCallback((values) => {
    console.log("Received values of form: ", values);
    setSearch({ ...search, ...values });
    setCurrent(1)
    setDoGetData(!doGetData);
  });

  return (
    <Fragment>
      <Form
        style={{ borderBottom: "1px solid rgba(0,0,0,.06)" }}
        form={form}
        name="advanced_search"
        className="ant-advanced-search-form"
        onFinish={onFinish}
      >
        <Row gutter={24}>
          <Col span={6} key="1">
            <Form.Item
              name="regionCode"
              label="行政区划名称"
              {...formItemLayout}
            >
              <AreaRegion />
            </Form.Item>
          </Col>
          <Col span={6} key="2">
            <Form.Item
              name="sysDicProjectType"
              label="项目类型"
              {...formItemLayout}
            >
              {/* <Input placeholder="" /> */}
              <Select placeholder="请选择项目类型" allowClear>
                {options.projectType.map((item) => {
                  return (
                    <Option value={item.id} key={item.id}>
                      {item.name}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          </Col>
          <Col span={6} key="3">
            <Form.Item name="auditState" label="审核状态" {...formItemLayout}>

              <Select placeholder="请选择项目类型" allowClear>
                {options.auditState.map((item) => {
                  return (
                    <Option value={item.id} key={item.id}>
                      {item.name}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          </Col>
          <Col span={6} style={{ textAlign: "left" }}>
            <Button type="primary" htmlType="submit">
              查询
            </Button>
            <Button
              style={{ margin: "0 8px" }}
              onClick={() => {
                form.resetFields();
                setSearch(form.getFieldsValue())
                setCurrent(1)
                setDoGetData(!doGetData);
              }}
            >
              重置
            </Button>
            <Button
              style={{ fontSize: 12 }}
              onClick={() => {
                // this.setState({ expand: !this.state.expand });
                setExpand(!expand);
              }}
            >
              {expand ? <UpOutlined /> : <DownOutlined />} 更多
            </Button>
          </Col>
        </Row>
        <Row gutter={24} style={{ display: expand ? "flex" : "none" }}>
          {/* {expand ? ( */}

          <Col span={6} key="4">
            <Form.Item name="projectName" label="项目名称" {...formItemLayout}>
              <Input placeholder="" />
            </Form.Item>
          </Col>
          <Col span={6} key="5">
            <Form.Item
              name="enterpriseName"
              label="企业全称"
              {...formItemLayout}
            >
              <Input placeholder="" />
            </Form.Item>
          </Col>
        </Row>
      </Form>

      <Button
        type="primary"
        style={{ margin: "10px 0" }}
        onClick={() => {}}
      >
        新增
      </Button>

      <Table
        rowClassName="row-class"
        columns={columns}
        pagination={{
          showQuickJumper: true,
          hideOnSinglePage: false,
          showSizeChanger: true,
          pageSizeOptions: [15, 30, 50, 100],
          showTotal: (total, range) =>
            `${range[0]}-${range[1]}，共 ${total} 项`,
          total: total,
          pageSize: size,
          current: current,
          onShowSizeChange: (current, size) => {
            console.log(current, size);
            // setSearch({ ...search, size });
            setSize(size);

            // getList()
            // forceUpdate()
          },
          onChange: (page, pageSize) => {
            console.log(page, pageSize);
            // setSearch({ ...search, current: page });
            setCurrent(page);
            // getList()
            // forceUpdate()
          },
        }}
        bordered
        dataSource={list}
        scroll={{ x: 1500, y: 650 }}
      />
    </Fragment>
  );
  // }
}
